import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon} from "taro-ui";
import {View, Navigator, Image, Text} from '@tarojs/components'
import {http} from '../../utils/http'
import {NEWS_LIST, RESOURCE_URL} from '../../constants/api';
import {platform} from '../../utils/platform-settting.service';
import {GetRequest, vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './list.scss'

interface NewsItem {
  title: string
  uuid: string
  img: string
  content: string
}

interface News {
  firstPage: boolean
  lastPage: boolean
  list: NewsItem[]
  pageNumber: number
  pageSize: number
  totalPage: number
  totalRow: number
}

export default class List extends Component {
  state: {
    newsList: NewsItem[]
    loadMoreStatus: "more" | "loading" | "noMore"
    news: News
  } = {
    newsList: [],
    loadMoreStatus: 'loading',
    news: {
      lastPage: false,
      firstPage: true,
      list: [],
      pageSize: 10,
      pageNumber: 1,
      totalRow: 0,
      totalPage: 0
    }
  }

  onReachBottom() {
    this.loadMore()
  }

  loadMore() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'}, async () => {
        this.page++
        const newsList = await this.getData(this.page)
        const old = this.state.newsList
        this.setState({newsList: [...old, ...newsList]})
      })
    }
  }

  async componentDidShow() {
    vcmonitor(this)
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const typeId = parseInt(Taro.getCurrentInstance().router.params.typeId) || 0
    const news = await http.get<News>(NEWS_LIST, {page: 1, typeId})
    const setting = await platform.getSetting();
    if (setting && setting.platformName) {
      Taro.setNavigationBarTitle({
        title: setting.platformName || ''
      })
    }
    if (news) {
      if (news && news.list.length === news.pageSize) {
        this.setState({loadMoreStatus: 'more'})
      } else {
        this.setState({loadMoreStatus: 'noMore'})
      }
      this.setState({news, newsList: news.list})
    }
  }

  page = 1

  async getData(page) {
    const typeId = parseInt(Taro.getCurrentInstance().router.params.typeId) || 0
    const newsList = await http.get<News>(NEWS_LIST, {page, typeId})
    if (newsList && newsList.list.length === newsList.pageSize) {
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    if (newsList) {
      return newsList.list
    } else {
      return []
    }
  }

  render() {
    const {newsList} = this.state
    return (
      <View className='new-list-root'>
        <GzhAuth />
        <View className='box'>
          {newsList.length > 0 && newsList.map(item => <View key={item.uuid} className={`item ${ !item.img && 'item-no-img' }`}>
            <Navigator url={`/common/news/detail?uuid=` + item.uuid}
              hover-class='active'
            >
              {item.img && <Image className='img' src={item.img} mode='aspectFill' />}
              <View className='content-info'>
                {item.title && <View className='title'>{item.title}</View>}
                {item.content && <View className='content'>
                  <View className={item.img ? "one-hidden" : "two-hidden"}>{item.content}</View>
                </View>}
                {item.pub_date && <View className='pub_date'><AtIcon value='iconfont icon-jiaoyijilu-01' color='#666' size='18' /><Text className='pub_date_text'>{item.pub_date}</Text></View>}
              </View>
            </Navigator>
          </View>)}
          {newsList.length <= 0 && <View className='listNull'>
            <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
            <View className='text'>什么都没有,去看看别的吧~</View>
          </View>}
        </View>
      </View>
    )
  }
}
